<template>
	<view class="container">
		<view class="search">
			
			<picker class="picker-item" mode="selector" :range="users" range-key="remark" @change="userChange"  @cancel="userCancel">
				{{target_text}} <text class="iconfont icon-triangle-copy-copy-copy"></text>
			</picker>
			<picker class="picker-item date" mode="date" fields="month" @change="dateChange" @cancel="dateCancel"><text class="iconfont icon-rili"></text> {{date_text}}</picker>
		
			
			<picker class="picker-item" mode="selector" :range="operateList" range-key="name" @change="operateChange">
				{{type_text}} <text class="iconfont icon-triangle-copy-copy-copy"></text>
			</picker>
			<picker class="picker-item" mode="selector" :range="accountList" range-key="name" @change="accountChange"  @cancel="accountCancel">
				{{account_text}} <text class="iconfont icon-triangle-copy-copy-copy"></text>
			</picker>
		</view>
			
		
		<view class="canvasView">
			<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
			
		</view>
		<view class="canvasView">
			<mpvue-echarts :echarts="echarts" :onInit="incomeInit" canvasId="income" ref="incomeChart" />
		</view>
		
		<view class="canvasView">
			<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/components/echarts/echarts.common.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
	import base from '../../common/base.js';

	
	let pieOption = {
		title: {
			text: '支出'
		},
		animation: false,
		backgroundColor: '#F8F8F8',
		color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
		series: [{
			label: {
				normal: {
					fontSize: 14
				}
			},
			type: 'pie',
			center: ['50%', '50%'],
			radius: [0, '60%'],
			data: [],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 2, 2, 0.3)'
				}
			}
		}]
	};
	
	let incomeOption = {
		title: {
			text: '收入'
		},
		animation: false,
		backgroundColor: '#F8F8F8',
		color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
		series: [{
			label: {
				normal: {
					fontSize: 14
				}
			},
			type: 'pie',
			center: ['50%', '50%'],
			radius: [0, '60%'],
			data: [],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 2, 2, 0.3)'
				}
			}
		}]
	};

	let lineOption = {
		title: {
			text: '每日统计'
		},
		legend: {
			data:['收入','支出']
		},
		animation: false,
		color: ['#37A2DA', '#9FE6B8'],
		grid: {
			x: 35,
			x2: 10,
			y: 30,
			y2: 25
		},
		calculable: false,
		xAxis: [{
			type: 'category',
			data: []
		}],
		yAxis: [{
			type: 'value',
			splitArea: {
				show: true
			}
		}],
		series: [{
			name: '收入',
			type: 'line',
			data: []
		}, {
			name: '消费',
			type: 'line',
			data: []
		}]
	};

	export default {
		data() {
			return {
				echarts: echarts,
				updateStatus: false,
				consumption: {},
				income: {},
				count: {},
				fundsList: [],
				page: 1,
				nextPage: true,
				target_text: '成员',
				date_text: '月份',
				type_text: '类型',
				type_id: '',
				account_text: '全部帐户',
				account_id: '',
				accountList: [],
				users: [],
				userId: '',
				date: '',
				operateList: [
					{
						value: '',
						name: '全部'
					},
					{
						value: '1',
						name: '支出'
					},
					{
						value: '2',
						name: '收入'
					}
				],
				inAmount:0,
				outAmount: 0,
			}
		},
		onLoad() {
			// pieOption.series[0].data = cityList.slice(0);
			this.getData();
			this.getAccountList();
			this.getusers();
		},
		onPullDownRefresh() {
			this.resetData();
		},
		methods: {
			resetData: function(){
				this.fundsList = [];
				this.page = 1;
				this.nextPage = true;
				this.target_text = '成员';
				this.date_text = '月份';
				this.type_text = '类型';
				this.type_id = '',
				this.account_text = '全部帐户';
				this.account_id = '';
				this.userId = '';
				this.date = '';
				
				this.getData((res) => {
					uni.stopPullDownRefresh();
				});
				
			},
			getData(callback){
				var that = this;
				uni.showLoading({
					mask: true
				})
				base.base.request({
					url: 'count/index',
					data: {
						date: that.date,
						user_id: that.userId,
						account_id: that.account_id,
						operation_type: that.type_id
					},
					sCallback: function(res) {
						console.log(res)
						uni.hideLoading();
						if(res.code == 200) {
							if(res.data.consumption.length > 0) {
								
								res.data.consumption.forEach(function(item){
									incomeOption.series[0].data.push({
										value: item.amount,
										name: item.name
									});
								})
								that.$refs.incomeChart.init();
							}
							
							console.log(incomeOption)
							
							if(res.data.income.length > 0) {
								res.data.income.forEach(function(item){
									pieOption.series[0].data.push({
										value: item.amount,
										name: item.name
									});
								})
								that.$refs.pieChart.init();
							}
							
							console.log(pieOption)
							
							if(res.data.count.length > 0) {
								res.data.count.forEach(function(item){
									lineOption.xAxis[0].data.push(item.date);
									lineOption.series[0].data.push(item.inc);
									lineOption.series[1].data.push(item.des);
								})
								that.$refs.lineChart.init();
							}
							
							console.log(lineOption)
							callback && callback();
						}
					}
				})
			},
			updatePie() {
				// 参考 mpvue-charts 的懒加载示例
				// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue

				if (this.updateStatus) {
					return;
				}
				pieOption.series[0].data.push({
					value: 20,
					name: '武汉'
				});
				pieOption.series[0].data.push({
					value: 10,
					name: '杭州'
				});
				this.$refs.pieChart.init();
				this.updateStatus = true;
			},
			pieInit(canvas, width, height) {
				let pieChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(pieChart)

				pieChart.setOption(pieOption)
				return pieChart
			},
			incomeInit(canvas, width, height) {
				let incomeChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(incomeChart)
			
				incomeChart.setOption(incomeOption)
				return incomeChart
			},
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)

				lineChart.setOption(lineOption)
				return lineChart
			},
			//帐户列表
			getAccountList: function(callback){
				var that = this;
				base.base.request({
					data: {'target_user_id':that.userId},
					url: 'account/index',
					sCallback: function(res){
						var accountList = res.data.account_list;
						if(accountList.length > 0) {
							accountList.forEach(function(item){
								var name = '';
								if(item.remark){
									name = '【'+item.remark+'】';
								}
								item.name = name+item.name;
							})
						}
						that.accountList = accountList;
						that.amount = res.data.amount;
						callback && callback(res);
					}
				})
			},
			
			//绑定成员 
			getusers: function(){
				var that = this;
				base.base.request({
					data: {},
					url: 'binduser/users',
					sCallback: function(res){
						that.users = that.users.concat(res.data);
					}
				})
			},
			initData: function(){
				incomeOption.series[0].data = [];
				pieOption.series[0].data = [];
				lineOption.xAxis[0].data=[];
				lineOption.series[0].data=[];
				lineOption.series[1].data=[];
				this.$refs.incomeChart.init();
				this.$refs.lineChart.init();
				this.$refs.pieChart.init();
				this.fundsList = [];
				this.getData();
			},
			
			//选择时间
			dateChange(evt) {
				console.log(evt);
				this.date = evt.detail.value;
				this.date_text = this.date.substr(2, 5);
				this.initData();
			},
			
			//取消时间
			dateCancel(){
				this.date = '',
				this.date_text = '日期',
				this.initData();
			},
			//选择成员
			userChange(evt) {
				
				var index = evt.detail.value;
				this.target_text = this.users[index]['remark'];
				this.userId = this.users[index]['target_user_id'];
				this.initData();
				this.getAccountList();
			},
			//取消成员
			userCancel(evt) {
				
				this.target_text = '成员';
				this.userId = '';
				this.initData();
				this.getAccountList();
			},
			//选择类型
			operateChange(evt) {
				var index = evt.detail.value;
				var data = this.operateList[index];
				this.type_text = data.name;
				this.type_id = data.value;
				this.initData();
			},
			//选择帐号
			accountChange(evt) {
				var index = evt.detail.value;
				var data = this.accountList[index];
				this.account_text = data.name;
				this.account_id = data.id;
				this.initData();
			},
			//取消帐号
			accountCancel(evt) {
			
				this.account_text = '全部帐户';
				this.account_id = '';
				this.initData();
				
			},
		},
		components: {
			mpvueEcharts
		}
	}
</script>

<style>
	page,
	view {
		display: flex;
		/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
	}

	page {
		min-height: 100%;
		background: #fff;
	}

	.page-section-title {
		padding: 0 30upx;
	}

	.title {
		margin-left: 30upx;
		color: #8f8f94;
	}

	.container {
		padding-bottom: 30upx;
		box-sizing: border-box;
		padding-top: 90upx;
	}
	
	.list{
		flex-direction: row;
	}

	.container,
	.canvasView {
		flex: 1;
		flex-direction: column;
	}
	
	.canvasView{
		/* padding: 20upx; */
		/* box-sizing: border-box; */
	}

	.navigate {
		color: #007AFF;
	}

	.canvas-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}
	
	.canvas-bar .title{
		font-size: 24upx;
		flex: 1;
		justify-content: center;
	}

	.update-btn {
		margin-right: 30upx;
	}
	
	/* 搜索框开始 */
	.search{
		height: 90upx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: #081F3F;
		color: B2B3B4;
		padding: 15upx 0;
		font-size: 22upx;
		justify-content: center;
		box-sizing: border-box;
		line-height: 60upx;
	}
	
	.search picker{
		display: flex;
		flex: 1;
		justify-content: center;
		border-right: 1upx solid #1F4B83;
		overflow: hidden;
		
	}
	
	.search .iconfont{
		padding: 0 8upx;
	}
</style>
